export const ExampleTpl = {
  template: `
    <h1>
      <a name="hello-world" href="#hello-world">
        Hello world!
      </a>
    </h1>
  `
}

// export const Parent = {
//   template: `
//     <div name="aaa">
//       <slot></slot>
//     </div>
//   `
// }

export const ExampleTpl2 = {
  render(createElement) {
    return createElement(
      {
        template: `
          <div name="aaa">
            <slot></slot>
          </div>
        `
      },
      null,
      [
        createElement(
          'h1',
          null,
          [
            createElement(
              'a',
              {
                attrs: {
                  name: this.name,
                  href: '#hello-world',
                },
                class: {
                  active: false
                }
              },
              'Hello world!'
            ),
            createElement(
              'span', null, 'span content'
            )
          ]
        )
      ]
    )
  },
  data() {
    return {
      name: 'hello-world'
    }
  }
}

// const Parent = {
//   template: `
//     <div>
//       <slot></slot>
//     </div>
//   `
// }

export const ExampleTpl3 = {
  // template: `
  //   <parent> hello parent </parent>
  // `,
  render(createElement) {
    return createElement(
      {
        template: `
          <div>
            <slot></slot>
          </div>
        `
      },
      [
        createElement(
          'h1',
          'hello parent'
        )
      ]
    )
  }

  // components: {
  //   parent: Parent
  // }
}